<template>
  <div class="user">
    <div class="user_top">
      <van-row>
        <van-col span="6">
          <van-image round width="80px" height="80px" :src="avatar" fit="cover" />
        </van-col>
        <van-col span="18">
          <div class="tologin">
            <div v-if="isLogin">
              <h4>{{nickname}}</h4>
              <p @click="toExit">退出登录</p>
            </div>
            <div v-else>
              <h3 @click="toLogin">点击登录</h3>
            </div>
            <van-icon name="arrow" />
          </div>
        </van-col>
      </van-row>
    </div>
    <!-- 功能 -->
    <van-grid :column-num="3">
      <van-grid-item
        v-for="(v,k) in gridArr"
        :key="k"
        @click="onClick(v.url)"
        :icon="v.icon"
        :text="v.text"
      />
    </van-grid>
    <!-- 登录窗口 -->
    <div>
      <van-popup v-model="show" closeable :style="{ height: '45vh',width:'90%'}">
        <van-cell-group>
          <div class="loginInput">
            <h3>登录入口</h3>
            <van-field
              v-model="username"
              label-width="50px"
              label-class="lbalgin"
              label="用户名"
              placeholder="请输入用户名"
            />
            <van-field
              v-model="password"
              label-width="50px"
              label-class="lbalgin"
              label="密码"
              type="password"
              placeholder="请输入密码"
            />
            <van-button type="info" size="large" @click="login">登录</van-button>
          </div>
        </van-cell-group>
      </van-popup>
    </div>
  </div>
</template>

<script>
import { Login } from "@/request/api";
import { setCookie, getCookie, delCookie } from "@/util/cookie";
export default {
  data() {
    return {
      username: "",
      password: "",
      nickname: "",
      show: false,
      isLogin: false,
      avatar:
        "http://yanxuan.nosdn.127.net/8945ae63d940cc42406c3f67019c5cb6.png",
      gridArr: [
        { icon: "label-o", text: "我的订单", url: "/" },
        { icon: "bill-o", text: "优惠券", url: "/user/coupon" },
        { icon: "goods-collect-o", text: "礼品卡", url: "/" },
        { icon: "location-o", text: "我的收藏", url: "/" },
        { icon: "flag-o", text: "我的足迹", url: "/" },
        { icon: "user-o", text: "会员福利", url: "/" },
        { icon: "aim", text: "地址管理", url: "/user/address" },
        { icon: "warn-o", text: "账号安全", url: "/" },
        { icon: "manager-o", text: "联系客服", url: "/" },
        { icon: "question-o", text: "帮助中心", url: "/" },
        { icon: "photo-o", text: "意见反馈", url: "/user/feedback" }
      ]
    };
  },

  created() {
    let token = getCookie("token");
    let avatar = getCookie("avatar");
    let nickname = getCookie("nickname");
    if (token != null) {
      this.avatar = avatar;
      this.nickname = nickname;
      this.isLogin = true;
    }
  },
  methods: {
    onClick(url) {
      if (url == "/") {
        this.$toast("功能暂未开放");
      } else {
        this.$router.push(url);
      }
    },
    login() {
      Login({
        username: this.username,
        pwd: this.password
      }).then(res => {
        if (res.errno == 0) {
          setCookie("token", res.data.token, 7);
          setCookie("avatar", res.data.userInfo.avatar, 7);
          setCookie("nickname", res.data.userInfo.nickname, 7);
          this.avatar = res.data.userInfo.avatar;
          this.nickname = res.data.userInfo.nickname;
          this.show = false;
          this.isLogin = true;
          window.location.reload();
        } else {
          this.$toast.fail(res.errmsg);
        }
      });
    },
    toLogin() {
      this.show = true;
    },
    toExit() {
      this.$dialog
        .alert({
          message: "确认要退出登录吗"
        })
        .then(() => {
          delCookie("token");
          delCookie("avatar");
          delCookie("nickname");
          localStorage.clear();
          window.location.reload();
        });
    }
  }
};
</script>

<style lang="less" scoped>
.user {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f4f4f4;
  .user_top {
    padding: 30px 2%;
    height: 80px;
    background: #333;
    .tologin {
      color: #fff;
      font-size: 21px;
      font-weight: normal;
      line-height: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      h3 {
        font-size: 21px;
        font-weight: normal;
        display: inline-block;
        margin-left: 10px;
      }
      h4 {
        font-size: 21px;
        font-weight: normal;
        display: inline-block;
        margin: 0;
      }
      p {
        font-size: 16px;
        margin: 0;
      }
    }
  }
  /deep/.van-popup--center {
    border-radius: 10px;
  }
  .loginInput {
    padding: 5%;
    /deep/.van-cell {
      padding: 10px 16px 0px;
      line-height: 18px;
      border-bottom: 1px solid #f4f4f4;
    }
    /deep/.van-field__control {
      padding-left: 10px;
    }
    /deep/.van-button--large {
      width: 70%;
      height: 40px;
      margin-left: 15%;
      margin-top: 10px;
    }
    h3 {
      text-align: center;
      font-size: 24px;
    }
  }
  /deep/.van-grid-item {
    height: 15vh;
  }
  /deep/.van-grid-item__content::after {
    border-color: #666;
  }
  /deep/.van-field__label {
    // text-align-last: justify;
    text-align-last: justify;
    text-align: justify;
    margin-right: 5px;
    &:after {
      //适配ios
      content: " ";
      display: inline-block;
      width: 100%;
    }
  }
}
</style>